import { useState, useEffect } from 'react';
import { Row, Col, message } from 'antd';
import { CardItem, DashboardWrapper } from './style';
import { ProjectProps } from './interface';
import { history } from 'umi';
import { getGroupList } from '@/api';
import { ChromeFilled } from '@ant-design/icons';

const fetchProjectList = async (setList: (param: ProjectProps[]) => void) => {
  try {
    const res = await getGroupList();

    setList(res.code === 200 ? res?.data?.data || [] : []);
  } catch (error) {
    message.error(error.message);
  }
};

const ProjectRender = () => {
  const [projects, setProjects] = useState<ProjectProps[]>([]);

  useEffect(() => {
    fetchProjectList(setProjects);
  }, []);

  return (
    <Row gutter={[24, 24]}>
      {projects.map((app) => {
        return (
          <Col span={4} key={app.groupId}>
            <CardItem
              onClick={() => {
                try {
                  history.push(`/project/${app.groupId}`);
                } catch (error) {}
              }}
            >
              <div>
                <ChromeFilled />
              </div>
              {app.groupName}
            </CardItem>
          </Col>
        );
      })}
    </Row>
  );
};

export default () => {
  return (
    <DashboardWrapper>
      <ProjectRender />
    </DashboardWrapper>
  );
};
